<%@page import="net.zretc.entitys.Pet"%>
<%@page import="java.util.List"%>
<%@page import="net.zretc.entitys.Users"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>萌宠之家</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/animation.js"></script>
    <script src="js/index.js"></script>
    <style type="text/css">
    	*{
    		padding: 0px;
    		margin: 0px;
    	}
    	html,body{
    		width: 100%;
    		height:100%;
    	}
    	#content{
    		width: 100%;
    		height:100%;
    	}
    </style>
</head>

<body>
<div id="content">
    <div>
        <!-- 头部 -->
        <div class="w clearfix">
            <div class="fl logo">
                <img src="img/logo.png" alt="">
            </div>
            <div class="fl serch clearfix">
                <form action="show.do" method="post">
                    <input type="text" placeholder="请输入关键字" class="fl" name="name">
                    <button class="fr">搜索</button><!-- 若空点，则已get方式传送 -->
                </form>
            </div>
            <div class="fr user">
            	<span style="float: right;"><a href="houtai.do">后台管理</a></span>
            	<c:if test="${users==null }">
            	
                	<span style="float: right;"><a href="register.jsp">个人中心</a></span>
                 </c:if>
            	<c:if test="${users==null }">
                	<span style="float: right;"><a href="register.jsp">登录</a></span>
                </c:if>
                <c:if test="${users!=null }">
                	<span style="font-size: 16px;float: left;margin-top:20px">欢迎您，${users.username}</span>
                	<span><a href="logout.jsp" style="float: right;">退出登陆</a></span>
                	<span><a href="center.jsp" style="float: right;">个人中心</a></span>
                </c:if>

            </div>

        </div>
        <!-- 导航栏 -->
        <div class="nav">
            <div class="nav_auto">
                <div>
                    <ul class="clearfix">
                        <li><a href="show.do">首页</a></li>
                        <li><a href="#1fl">狗狗</a></li>
                        <li><a href="#2fl">猫猫</a></li>
                        <li><a href="#3fl">龟龟</a></li>
                        <li><a href="#4fl">兔兔</a></li>
                        <li><a href="#5fl">其他</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 轮播图 -->
        <div class="focus" >
            <a href="#" class="arrow-l">&lt;</a>
            <a href="javascript:;" class="arrow-r">&gt;</a>
            <ul class="clearfix">
                <li><a href="#"><img src="img/封面.png" alt="" width="100%" height="381px"></a></li>
                <li><a href="#"><img src="img/封面2.png" alt="" width="100%" height="381px"></a></li>

            </ul>
            <ol class="circle clearfix">
            </ol>
        </div>
        <!-- 楼层 -->
        <!-- 楼层判断 -->
        <c:forEach items="${petlist}" var="pet">
        	<c:if test='${pet.classes.equals("狗")}'>
        		<c:set var="dog" value="1"></c:set>
        	</c:if>
        	<c:if test='${pet.classes.equals("猫")}'>
        		<c:set var="cat" value="1"></c:set>
        	</c:if>
        	<c:if test='${pet.classes.equals("龟")}'>
        		<c:set var="gui" value="1"></c:set>
        	</c:if>
        	<c:if test='${pet.classes.equals("兔")}'>
        		<c:set var="tu" value="1"></c:set>
        	</c:if>
        	<c:if test='${pet.classes.equals("其他")}'>
        		<c:set var="it" value="1"></c:set>
        	</c:if>
        </c:forEach>
        <div class="floor">
            <!-- dog -->
            <c:if test="${dog!=null }">
    	        <div class="dog ani" id="1fl">
        	        <div class="dog_hd">
            	        <img src="img/9b0e2000e3aa3d5bd2b5c846b592af0.jpg"" alt="">
                	    <h1>狗狗</h1>
                	</div>
                	<div class=" dog_bd clearfix">
                    		<c:forEach items="${petlist}" var="pet">
                				<c:if test='${pet.classes.equals("狗")}'>
                					<div class="dogs fl">
                					<a href="petbi.do?id=${pet.id }"  style="display: inline;"><img src="upload/${pet.pics1}" alt=""></a>
                            			<p>${pet.title}</p>
                            			<i>￥:${pet.price }</i>
                            			<a href="javascript:shopadd(${pet.id });"><span class="fr">加入购物车</span></a>
	                       		 	</div>
	                       		</c:if>
        	    			</c:forEach>
        	     	</div>
            	</div>
            </c:if>
            <!-- cat -->
            <c:if test="${cat!=null }">
	            <div class="dog ani" id="2fl">
	                <div class="dog_hd">
	                    <img src="img/mao.jpg" alt="">
	                    <h1>猫猫</h1>
	                </div>
	                <div class="dog_bd clearfix">
	                    <c:forEach items="${petlist}" var="pet">
	                			<c:if test='${pet.classes.equals("猫")}'>
	                				<div class="dogs fl">
	                				<a href="petbi.do?id=${pet.id }"  style="display: inline;"><img src="upload/${pet.pics1}" alt=""></a>
	                            		<p>${pet.title}</p>
	                            		<i>￥:${pet.price }</i>
	                            		<a href="javascript:shopadd(${pet.id });"><span class="fr">加入购物车</span></a>
		                       		 </div>
		                       	</c:if>
	        	    	</c:forEach>
	                </div>
	            </div>
	        </c:if>
            <!-- 鬼鬼 -->
            <c:if test="${gui!=null }">
	            <div class="dog ani" id="3fl">
	                <div class="dog_hd">
	                    <img src="img/paxing.jpg" alt="">
	                    <h1>龟龟</h1>
	                </div>
	                <div class=" dog_bd clearfix">
	                   <c:forEach items="${petlist}" var="pet">
	                			<c:if test='${pet.classes.equals("龟")}'>
	                				<div class="dogs fl">
	                				<a href="petbi.do?id=${pet.id }"  style="display: inline;"><img src="upload/${pet.pics1}" alt=""></a>
	                            		<p>${pet.title}</p>
	                            		<i>￥:${pet.price }</i>
	                            		<a href="javascript:shopadd(${pet.id });"><span class="fr">加入购物车</span></a>
		                       		 </div>
		                       	</c:if>
	        	    	</c:forEach>
	                </div>
	            </div>
			</c:if>
			<!-- 兔兔 -->
            <c:if test="${tu!=null }">
	            <div class="dog ani" id="4fl">
	                <div class="dog_hd">
	                    <img src="img/a30ff9993e8ec00db10be8c6df678db.jpg" alt="">
	                    <h1>兔兔</h1>
	                </div>
	                <div class=" dog_bd clearfix">
	                   <c:forEach items="${petlist}" var="pet">
	                			<c:if test='${pet.classes.equals("兔")}'>
	                				<div class="dogs fl">
	                				<a href="petbi.do?id=${pet.id }"  style="display: inline;"><img src="upload/${pet.pics1}" alt=""></a>
	                            		<p>${pet.title}</p>
	                            		<i>￥:${pet.price }</i>
	                            		<a href="javascript:shopadd(${pet.id });"><span class="fr">加入购物车</span></a>
		                       		 </div>
		                       	</c:if>
	        	    	</c:forEach>
	                </div>
	            </div>
			</c:if>
			<!-- 其他 -->
            <c:if test="${it!=null }">
	            <div class="dog ani" id="5fl">
	                <div class="dog_hd">
	                    <img src="img/其他.jpg" alt="">
	                    <h1>其他</h1>
	                </div>
	                <div class=" dog_bd clearfix">
	                   <c:forEach items="${petlist}" var="pet">
	                			<c:if test='${pet.classes.equals("其他")}'>
	                				<div class="dogs fl">
	                        		<a href="petbi.do?id=${pet.id }" style="display: inline;"><img src="upload/${pet.pics1}" alt=""></a>
	                            		<p>${pet.title}</p>
	                            		<i>￥:${pet.price }</i>
	                            		<a href="javascript:shopadd(${pet.id });"><span class="fr">加入购物车</span></a>
		                       		 
		                       		 </div>
		                       	</c:if>
	        	    	</c:forEach>
	                </div>
	            </div>
			</c:if>
        </div>
        <!-- 底部 -->
        <div class="footer">
            <div>
                Compant Name@ All rights Reseverd
            </div>
        </div>
        <!-- 侧边 -->
        <div class="rightside">
        	<c:if test="${dog!=null }">
            <a href="javascript:;" class=""><img src="img/1.jpg" alt=""></a>
            </c:if>
            <c:if test="${cat!=null }">
            <a href="javascript:;" class=""><img src="img/2.jpg" alt=""></a>
            </c:if>
            <c:if test='${gui!=null }'>
            <a href="javascript:;" class=""><img src="img/5.jpg" alt=""></a>
            </c:if>
            <c:if test='${tu!=null }'>
            <a href="javascript:;" class=""><img src="img/3.jpg" alt=""></a>
            </c:if>
            <c:if test='${it!=null }'>
            <a href="javascript:;" class=""><img src="img/其他1.jpg" alt=""></a>
            </c:if>
            <a href="javascript:;" class="toop"><img src="img/6.jpg" alt=""></a>
            <div class="right"><a href="show.do?flag=true"><img src="img/bda.jpeg" alt="" id="shopcar"></a></div>
        </div>
        <!-- 加入购物车 -->
        <!-- <div class="mask"></div> -->
        <div class="add">
            <h1>"提示"</h1>
            <div class="add_a">
            	<script type="text/javascript">
            	function shopadd(id){
       					window.location.href="shop.do?id="+id;
       			}
            	
            	</script>
                <span>已成功将商品加入购物车!</span>
                <p>
                    <a href="show.do?flag=true"><span id="cut">查看购物车</span></a>
                </p>
            </div>
            <div class="add_b">3秒钟后自动屏蔽</div>
        </div>
    </div>
	<!-- 结算 -->
	<div class="container">
		<div class="settle">
			<h1>购物车</h1>
			<c:if test="${users!=null}">
			<%
				Users a=(Users)session.getAttribute("users");
				String name=a.getUsername()+"list";
				Object b=application.getAttribute(name);
				if(b==null){
					System.out.print("无");
				}else{
					List<Pet> list=(List<Pet>)b;
					request.setAttribute("piapialist1", list);
				}
			%>
			</c:if>
			<c:if test="${piapialist1!=null}"> 
			<c:set value="0" var="sum"></c:set>
			<form action="#">
				 
				<table class="table table-hover">
					<!-- On rows -->
					
					<tr>
						<td>id</td>
						<td>商品</td>
						<td>单价</td>
						<td>是否出货</td>
						<td><a href="shopalldel.do" class="checkAll">全删</a></td>
					</tr>
					
					<c:forEach items="${piapialist1}" var="pet1" varStatus="status">
						<tr>
							<td>${status.index+1 }</td>
							<td>${pet1.title}</td>
							<td>${pet1.price}元</td>
							<td>${pet1.status}</td>
							<td><a href="shopdel.do?id=${pet1.id }" class="check" >删除</a></td>
						</tr>
						<c:set value="${sum+pet1.price}" var="sum"></c:set>
					</c:forEach>
					<!-- <h1>没有商品</h1> -->
				</table>
				<button id="del">取消</button>
				<span>共计:<i>${sum}</i>元
				</span>                    
				<button><a href="shopaccount.do">结算</a></button>
				               
			</form>
			</c:if>
			<c:if test="${piapialist1==null}"> 
				<h1 style="text-align: center;background-color:#; ">该购物车中并没有商品</h1>
				<button id="del">取消</button>
			</c:if>
		</div>
	</div>
	<div class="mask"></div>
	<div class="mask1"></div>
	<script>
	   $(".mask1").fadeOut(0);
	   $(".settle").fadeOut(0);
 	if (${flag==true}) {
            $(".settle").fadeIn(1000);
            $(".mask1").fadeIn(1000);
			setInterval(function () {
				$(".mask1").fadeOut(0);
				$(".settle").fadeOut(0);
			}, 30000);
        }
    </script>
</div>
</body>

</html>